<template>
    <el-card style="max-width: 100%;margin: 20px;">


        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>

            <el-table-column prop="name" label="名称" sortable />
            <el-table-column prop="code" label="权限值" sortable />

            <el-table-column prop="updateTime" label="修改时间" sortable />
            <el-table-column label="操作" min-width="120">
                <template #="scope">

                    <el-button size="small" type="primary" @click="showPop(scope.row)" :disabled="scope.row.level===4?true:false">
                        {{ scope.row.level != 3 ? '添加菜单' : '添加功能' }}
                    </el-button>

                    <el-button size="small" type="primary" :icon="Edit" @click="updatePop(scope.row)"
                        :disabled="scope.row.level===1?true:false">编辑

                    </el-button>
                    <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"
                        title="Are you sure to delete this?" @cancel="cancelEvent"
                        @confirm="handleDelete(scope.row.id)">
                        <template #reference>
                            <el-button size="small" type="primary" :icon="Delete"
                                :disabled="scope.row.level===1?true:false">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 新增修改对话框 -->
        <el-dialog v-model="dialogVisible" :title="meauParams.id?'修改菜单':'添加菜单'" width="500">
            <el-form :model="meauParams" ref="ruleFormRef" :rules="rules">
                <el-form-item label="菜单名称" prop="name" label-width="100">
                    <el-input v-model="meauParams.name"></el-input>
                </el-form-item>
                <el-form-item label="权限值" prop="code" label-width="100">
                    <el-input v-model="meauParams.code"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmClick">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>



    </el-card>
</template>
<script setup name="permission">
    import { ref, onMounted, reactive, nextTick } from 'vue'
    import { reqMenu, reqRemoveMenu,reqAddOrUpdateMenu } from '@/api/acl/meau/index.ts'

    import { Edit, Delete } from '@element-plus/icons-vue'
    import { ElMessage } from 'element-plus'
    let roleName = ref('')

    let userArr = ref([])
    let meauParams = reactive({
        name: '',
        code: '',
        level:0,
        pid:0
    })
    let tableData = ref([])
    //控制抽屉的方向
    let direction = ref('rtl')
    let drawer = ref(false)
let dialogVisible=ref(false)
//新增修改菜单的实例
let ruleFormRef=ref()
const rules = reactive({
        name: [
            { required: true, trigger: 'blur' },
        ],
        code:[{required: true, trigger: 'blur'}]
    })

    onMounted(() => {
        reqMeau()
    })
    const reqMeau = async () => {
        let res = await reqMenu();
        console.log(res);
        tableData.value = res.data
    }
    const handleDelete = async (id) => {
        let res = await reqRemoveMenu(id)
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            reqMeau()
        } else {
            ElMessage({
                type: 'error',
                message: '删除失败'
            })
        }
    }
    const cancelEvent = () => {
        ElMessage({
            type: 'info',
            message: '取消删除'
        })

    }
    const showPop = (row) => {
console.log(row);
        dialogVisible.value = true;
        meauParams.id = 0
        meauParams.name = ''
        meauParams.code = ''
        nextTick(() => {
            // 在打开这个对话框时，form这个dom结构还没有出现
            ruleFormRef.value.clearValidate('name')
            ruleFormRef.value.clearValidate('code')
        })
        meauParams.level=row.level+1
        meauParams.pid=row.id
    }
    const updatePop = (row) => {
        dialogVisible.value = true;
        Object.assign(meauParams, row)
        nextTick(() => {
            // 在打开这个对话框时，form这个dom结构还没有出现
            ruleFormRef.value.clearValidate('name')
            ruleFormRef.value.clearValidate('code')

        })
    }
    
    const confirmClick=async()=>{
        await ruleFormRef.value.validate()
        let res=await reqAddOrUpdateMenu(meauParams)
        if(res.code===200){
            dialogVisible.value=false
            reqMeau()
            ElMessage({
                type:'success',
                message:meauParams.id?'修改菜单成功':'添加菜单成功'
            })
        }else{
            ElMessage({
                type:'error',
                message:meauParams.id?'修改菜单失败':'添加菜单失败'
            })
        }
    }
</script>
<style scoped lang='scss'>
</style>